<template>
	<view class="result-container">
		<uv-toast ref="toast"></uv-toast>
		<PLoader :loading="loading"></PLoader>
		<view v-if="!loading">
			<!-- 状态图标区域 -->
			<view class="status-area" :class="{ 'success': payStatus === 1, 'fail': payStatus === 0, 'pending': payStatus === 2 }">
				<uv-icon :name="getStatusIcon" size="80" :color="getStatusColor" :class="{'rotating': payStatus === 2}" class="status-icon"></uv-icon>
				<text class="status-text">{{ getStatusText }}</text>
				<text class="amount">￥{{ order.payPrice }}</text>
			</view>

			<!-- 订单信息区域 -->
			<view class="order-info">
				<view class="info-item">
					<text class="label">订单编号</text>
					<text class="value">{{ order.orderNo }}</text>
				</view>
				<view class="info-item">
					<text class="label">支付方式</text>
					<text class="value">微信支付</text>
				</view>
				<view class="info-item" v-if="payStatus === 1">
					<text class="label">支付时间</text>
					<text class="value">{{ order.payTime }}</text>
				</view>
			</view>

			<!-- 按钮区域 -->
			<view class="button-group">
				<button v-if="payStatus === 1" class="btn primary" @click="viewOrder">查看订单</button>
				<button class="btn secondary" @click="backToHome">返回首页</button>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				loading: false,
				payStatus: 2, // 0: 失败, 1: 成功, 2: 支付中
				orderNo: '暂无订单号',
				order: {},
				timer: null,
				isRequesting: false  // 添加请求状态标记
			}
		},
		computed: {
			getStatusIcon() {
				const icons = {
					0: 'close-circle',
					1: 'checkmark-circle',
					2: 'reload'
				}
				return icons[this.payStatus]
			},
			getStatusColor() {
				const colors = {
					0: '#ff4d4f',
					1: '#07c160',
					2: '#faad14'
				}
				return colors[this.payStatus]
			},
			getStatusText() {
				const texts = {
					0: '支付失败',
					1: '支付成功',
					2: '支付处理中'
				}
				return texts[this.payStatus]
			}
		},
		methods: {
			showToast(msg, type = 'default', duration = 1000) {
				this.$refs.toast.show({
					message: msg,
					type: type,
					duration: duration,
				})
			},
			viewOrder() {
				// 查看订单详情
				uni.navigateTo({
					url: '/pages/order/detail'
				})
			},
			backToHome() {
				// 返回首页
				uni.switchTab({
					url: '/pages/index/index'
				})
			},
			async fetchOrderStatus() {
				// 如果正在请求中，则不重复请求
				if (this.isRequesting) return;
				
				try {
					this.isRequesting = true;
					this.loading = true;
					
					const data = await this.$http.post(`/pay/status?orderNo=${this.orderNo}`);
					if (data) {
						this.order = data;
						this.payStatus = data.status; // 0:失败 1:成功 2:支付中
						
						if (this.payStatus === 2) {
							// 清除之前的定时器
							if (this.timer) {
								clearTimeout(this.timer);
							}
							// 设置新的定时器
							this.timer = setTimeout(() => {
								this.fetchOrderStatus();
							}, 3000);
						}
						return;
					}
					this.payStatus = 0;
				} catch (e) {
					console.error(e);
					this.showToast(e.msg || '订单查询失败');
					this.payStatus = 0;
				} finally {
					this.loading = false;
					// 延迟重置请求状态，防止短时间内重复请求
					setTimeout(() => {
						this.isRequesting = false;
					}, 1000);
				}
			}
		},
		beforeDestroy() {
			// 清除定时器
			if (this.timer) {
				clearTimeout(this.timer);
			}
		},
		async onLoad(options) {
			if (options.orderNo) {
				this.orderNo = options.orderNo;
				this.fetchOrderStatus();
			} else {
				this.showToast('订单号无效');
				setTimeout(() => {
					uni.navigateBack();
				}, 1000);
			}
		},
		// 开启下拉刷新
		onPullDownRefresh() {
			// 如果正在请求中，直接结束下拉刷新
			if (this.isRequesting) {
				uni.stopPullDownRefresh();
				return;
			}
			
			this.fetchOrderStatus().then(() => {
				uni.stopPullDownRefresh();
			}).catch(() => {
				uni.stopPullDownRefresh();
			});
		}
	}
</script>

<style lang="scss" scoped>
	@import 'pay_result.scss';
</style>